<template>
  <!-- 表格 -->
  <Grid>
    <!-- 表格操作 -->
    <template #action="{ row }">
      <slot :row="row" name="action">
        <!-- 默认操作按钮 -->
        <el-button
          v-if="showEditButton"
          :icon="Edit"
          link
          type="primary"
          @click="handleEdit(row)"
        />
        <!-- 额外表格按钮 -->
        <slot :row="row" name="extraActionButtons"> </slot>
        <el-popconfirm
          class="box-item"
          placement="top"
          title="确定删除吗？"
          @confirm="handleDelete(row)"
        >
          <template #reference>
            <el-button
              v-if="showDeleteButton"
              :icon="Delete"
              link
              type="danger"
            />
          </template>
        </el-popconfirm>
      </slot>
    </template>
    <!-- 使用 toolbar-buttons 插槽添加自定义按钮 -->
    <template #toolbar-actions>
      <!-- 自定义标题 -->
      <slot name="title"></slot>
      <!-- 工具按钮栏 -->
      <slot name="toolbar-buttons">
        <el-button
          v-if="showAddButton"
          class="ml-auto"
          type="primary"
          @click="handleAdd"
        >
          {{ toolbarbuttonName }}
        </el-button>
      </slot>
    </template>
    <template #empty>
      <div style="color: red">
        <img
          class="m-auto h-[50%] w-[50%]"
          src="https://n.sinaimg.cn/sinacn17/w120h120/20180314/89fc-fyscsmv5911424.gif"
        />
        <p>不用再看了，没有更多数据了！</p>
      </div>
    </template>
  </Grid>
</template>

<script setup lang="ts">
// 引入props定义
import type { FosoTableProps } from './props';

import { fosoTableDefaults } from './props';

// 引入表格与类型
import { useVbenVxeGrid } from '#/adapter/vxe-table';

// 引入删除图标
import { Delete, Edit } from '@element-plus/icons-vue';

import { useTable } from '#/hooks/usetable';

// 使用withDefaults定义props
const props = withDefaults(defineProps<FosoTableProps>(), fosoTableDefaults);
const emit = defineEmits(['add', 'edit', 'delete']);
// 表格配置项
const { tableconfig } = useTable({
  columns: props.columns,
  // 远程请求数据
  proxyConfig: {
    ajax: {
      query: async (page: any) => {
        // await new Promise((r) => setTimeout(r, 200)); // 强制延迟1秒
        const { currentPage, pageSize } = page.page;
        return await props.requestApi({ page: currentPage, pageSize });
      },
    },
  },
});

const handleAdd = () => {
  emit('add');
};
const handleEdit = (row: any) => {
  emit('edit', row);
};

const handleDelete = (row: any) => {
  emit('delete', row);
};
// 表格事件
const gridEvents = {};

// 表格实例
const [Grid, gridApi] = useVbenVxeGrid({
  gridEvents,
  gridOptions: { ...tableconfig.value, ...props.extraTableConfig },
});
defineExpose({
  gridApi,
});
</script>
<style scoped lang="scss">
// 添加toolbar 和query 区间的padding
:deep(.vxe-toolbar) {
  padding-top: 5px !important;
}
</style>
